<template>

  <smart-page id="system-menu">
    <template #actions>
      <a-popconfirm content="确定需要更新摄像头吗?" position="lb" @ok="handleClick">
        <a-button v-auth="Acl.PRODUCT_CAMERA_REFRESH_CAMERA" type="primary">更新摄像头</a-button>
      </a-popconfirm>
    </template>
    <template #search>
      <smart-search :query-array="CAMERA_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="CAMERA_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange">
      <template #tx="{ record }">
        <a-tag :color="record.status===1?'green':'red'"> {{ record.status === 1 ? "在线" : "离线" }}</a-tag>
      </template>
      <template #action="{ record }">
        <a-space size="mini">
          <a-link @click="coet(record)">查看</a-link>
<!--          <a-link v-auth="Acl.PRODUCT_CAMERA_REFRESH_CAMERA" v-if="record.parentCode !=='0'" status="danger" @click="onDelete(record)"> 删除</a-link>-->
        </a-space>
      </template>
    </a-table>
    <!--    <refine-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>-->
        <edit-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
  </smart-page>


</template>
<script lang="ts" setup name="system-settings-menu">
import {Notification} from '@arco-design/web-vue';

import {useRouter} from 'vue-router'
import {onMounted} from 'vue';
import {TablePage} from "@/libs/core";
import {CAMERA_COLUMNS} from "../../resource/colums";
import {ProductHttp} from "../../resource/http";
import {CAMERA_SEARCH} from "../../resource/search";
import EditModal from './edit.vue'
import {Acl} from "@/libs/acl";


const pageConfig = {title: '列表', rowKey: 'id', nameKey: 'deviceName',}
const {getCameraList, delCamera, refreshCamera} = ProductHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getCameraList).setDeleteXhr(delCamera).setPermission(Acl.PRODUCT_CAMERA_PAGE_LIST);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onSearch,onDelete} = tablePage
onMounted(() => onFetch())

const handleClick = async () => {
  const {data} = await refreshCamera();
  console.log(data)
  if (data.status) {
    onFetch()
    Notification.success({
      title: '更新成功',
      content: data.message,
      position: "topRight"
    })
  }
};
const router = useRouter()
const coet = (record) => {

  router.push({path: "detail",query:{deviceSerial:record.deviceSerial}})

}

</script>

<style lang="less" scoped>
:deep( .smart-page-header) {
  margin-bottom: 1px !important;
}
</style>